<template>
  <div>
    <common-head title="购物车" />
    <div class="wrap">
      <div class="items">
        <van-swipe-cell v-for="(item,index) in items" :key="item.id">
          <div class="item">
            <van-checkbox  @click="itemCheckChange" v-model="item.checked" />
            <van-card :num="item.num" :price="item.minPrice" :title="item.name" :thumb="item.pic">
              <template #footer>
                <van-stepper @change="itemNumChange" v-model="item.num" />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square
              @click="delItem(index)"
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <my-tabbar />
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import CommonHead from '@components/CommonHead'
import { mapState, mapMutations } from 'vuex'
import { Dialog } from 'vant'
export default {
  created () {
    this.calcTotal()
  },
  methods: {
    delItem (index) {
      // 删除商品

      Dialog.confirm({
        title: '删除商品',
        message: '您确认删除吗?'
      }).then(() => {
        // on confirm
        this.items.splice(index, 1)
        this.set_items(this.items)
        this.calcTotal()
      })
    },
    itemCheckChange () {
      /*
      双向绑定 this.items中的某个商品选中状态已经改变
      改变后视图刷新 this.items重新计算 但是 依赖没有变化
      视图没有变
      只需要将改变后的值 赋值 依赖 让依赖变化
      */
      this.set_items(this.items)
      // 让依赖也改变了
      this.calcTotal()
      console.log(this.items)
      // every  选中每个商品时判断是不是所有商品都被选中了
      const allChecked = this.items.every(item => item.checked)
      this.set_allChecked(allChecked)
    },
    onSubmit () {
      // 点击提交订单
      /*
      去除未选中商品
      将选中商品
      和总价格 一起发送给订单接口
      */
      const checkItems = this.items.filter(item => item.checked)
      const total = this.total
      /*
      要将 购买商品 和 总价格 发送给提交订单接口 并跳转到 订单页 获取提交购买商品
      默认返回 当前用户中的默认联系人
     */
      this.$router.push('/order')
    },
    itemNumChange () {
      // 点击改变商品购买数量
      // 将改变后的 计算属性 items 赋值给他在vuex中依赖的items

      this.set_items(this.items)
      // 重新计算总价格
      this.calcTotal()
    },
    calcTotal () {
      /*
      所有的已经选中的商品的 单价*数量累加
      */
      let total = 0
      //  去除未选中商品
      const checkItems = this.items.filter((item) => item.checked)
      checkItems.forEach((item) => {
        total += item.minPrice * item.num
      })
      // 保留两位小数
      total = parseFloat(total.toFixed(2))
      // 将计算好的总价格 给 vuex cart中 total
      this.set_total(total)
    },
    ...mapMutations('cart', ['set_total', 'set_items', 'set_allChecked', 'set_all_item_check'])
  },
  computed: {
    ...mapState({
      items: (state) => JSON.parse(JSON.stringify(state.cart.items)),
      total: (state) => state.cart.total
    }),
    allChecked: {
      get () {
        return this.$store.state.cart.allChecked
      },
      set (newVal) {
        /*
        想要直接修改计算属性 需要加 set 在set中通过定义newVal去修改他的依赖
        */
        this.set_allChecked(newVal)
        // 权限改变  修改每个商品选中状态
        this.set_all_item_check(newVal)
        this.calcTotal()
      }
    }
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 46px;
  padding-bottom: 100px;

  .delete-button {
    height: 100%;
  }
  .item {
    display: flex;
    background-color: #fafafa;
    .van-checkbox {
      margin: 0 6px;
    }
    .van-card {
      flex: 1;
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>
